<template>
    <div>
        <form action="/">
                <van-search
                    v-model="keyword"
                    show-action
                    placeholder="请输入搜索关键词"
                    @search="onSearch(keyword)" />
        </form>

        <div v-if="keyword.length == 0">
            <div class="lists" v-for="(item,index) of lists" :key="index">
                <Title :item="item" :keyword="index"></Title>
                <div class="moviecontainer">
                    <MovieItem :movies="item" v-for="item,index of item.res" :key="index"></MovieItem>
                </div>
            </div>
        </div>
        <div v-if="keyword.length != 0">
            <div class="lists" v-for="(item,index) of searchmovies" :key="index">
                <div class="moviecontainer">
                    <MovieItem :movies="item"></MovieItem>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import MovieItem from '../../components/MovieItem';
import Title from '../../components/Title';
    import { getMovie } from "../../model/moviehttp";
    import { getCollectMovie } from "../../model/MovieCollect";
    export default {
        components:{MovieItem,Title},
        data(){
            return{
                lists:{},
                keyword:"",
                searchmovies:"",
            }
        },
        methods: {
            onSearch(keyword){
                // console.log(keyword)
                var searchUrl = `/api/search?keyword=${keyword}`;
                getCollectMovie(searchUrl).then(res=>{
                    // console.log(res.data.res)
                    this.searchmovies = res.data.res;
                })
            },
            
        },
        async mounted() {
            var https = [{"top250":"top250"},{"comingSoon":"即将上映"},{"inTheaters":"正在热映"}];
            var lists = {};
            for(let item of https){
                var key = Object.keys(item)[0];
                // console.log(key)
                var res = await getMovie(key);
                // console.log(res.data.res.slice(0,3))
                lists[key]={
                    res:res.data.res.slice(0,3),
                    title:item[key]
                }
                // console.log(lists)
            }
            this.lists = lists
            
        },
    }
</script>

<style scoped>
.lists{
width: 90%;
margin:10px auto;
text-align: center;
}
</style>